<!--
 * @Description: 订单管理
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2021-07-03 11:41:05
 * @LastEditTime: 2023-05-10 18:45:19
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
-->

<template>
	<div class="lb-shop-order">
		<top-nav />
		<div class="page-main">
			<el-row class="page-top-operate">
				<lb-button size="medium" type="primary" icon="el-icon-plus" @click="toShowDialog"
					v-hasPermi="`${$route.name}-add`">{{ $t('menu.ResidentialquartersAdd') }}</lb-button>
			</el-row>
			<div class="pb-lg">
				共{{ residentlist.total }}条数据
			</div>
			<el-table v-loading="" :data="residentlist.data"
				:header-cell-style="{ background: '#f5f7fa', color: '#606266' }" style="width: 100%">
				<el-table-column prop="id" label="ID" width="80" fixed></el-table-column>
				<el-table-column prop="area" min-width="300" label="省市区"></el-table-column>
				<el-table-column prop="street.name" min-width="300" label="街道"></el-table-column>
				<el-table-column prop="name" min-width="300" label="小区名"></el-table-column>
				<el-table-column label="操作" min-width="160">
					<template slot-scope="scope">
						<div class="table-operate">
							<lb-button size="mini" plain type="primary" @click="toShowDialog(scope.row)"
								v-hasPermi="`${$route.name}-edit`">{{ $t('action.edit') }}</lb-button>
							<lb-button size="mini" plain type="danger" @click="confirmDel(scope.row.id, -1)"
								v-hasPermi="`${$route.name}-delete`">{{ $t('action.delete') }}</lb-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page" :page-sizes="[5, 10, 20]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
		</div>
		<el-dialog :title="$t(subForm.id ? 'menu.ResidentialquartersEdit' : 'menu.ResidentialquartersAdd')"
			:visible.sync="showDialog" width="500px" center>

			<el-form class="dialog-form" :model="subForm" ref="subForm"  label-width="100px">
				<!-- <el-form-item label="省市区" prop="title">
					<el-cascader
						v-model="addressForm.area"
						:options="areaCascaderList"
						:props="areaCascaderProps"
						:placeholder="addressForm.province === ''? '请选择省市区': addressForm.province+' / '+addressForm.city+' / '+addressForm.district"
						clearable
						@change="areaCascaderHandleChange">
					</el-cascader>
				</el-form-item> -->
				<el-form-item label="省市区" prop="title">
					<el-cascader style="width: 350px;" v-model="area" :options="options" @change="handleChange"
						:props="{ value: 'label', label: 'label' }"></el-cascader>
				</el-form-item>
				<el-form-item label="街道" prop="title">
					<el-cascader style="width: 350px;" v-model="subForm.street_id" :options="streetOption" @change="streetChange"
						:props="{ value: 'id', label: 'name' }"></el-cascader>
				</el-form-item>
				<el-form-item label="小区名" prop="title">
					<el-input v-model="subForm.name" placeholder="请输入小区名"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showDialog = false">取 消</el-button>
				<el-button type="primary" @click="submitFormInfo" v-preventReClick>确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import moment from 'moment'
import {
	mapState
} from 'vuex'
import cityData from '@/utils/areadata.js'
export default {
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > (moment(moment(Date.now()).format('YYYY-MM-DD')).unix() + 24 * 3600 - 1) *
						1000
				}
			},
			cityType: {
				3: {
					type: 'success',
					text: '省'
				},
				1: {
					type: 'primary',
					text: '城市'
				},
				2: {
					type: 'danger',
					text: '区县'
				}
			},
			loading: {
				list: false,
				transfer: false
			},
			searchForm: {
				list: {
					page: 1,
					limit: 10,
					goods_name: '',
					coach_name: '',
					order_code: '',
					mobile: '',
					start_time: '',
					end_time: '',
					pay_type: 0,
					is_coach: 0,
					is_store: 0,
					admin_id: '',
					commmunity_id: "",
					is_add: 0
				},
			},
			subForm: {
				id: "",
				area: "",
				name: "",
				street_id:"",
			},
			total: {
				list: 0,
				transfer: 0
			},
			residentlist: [], //小区列表
			base_agent: "",
			showDialog: false,
			addressForm: {
				area: '',
				province: '',
				city: '',
				district: '',
				
			},
			// 地址级联选择器配置
			areaCascaderProps: {
				expandTrigger: 'hover',
				children: 'district',
				label: 'name',
				value: 'id'
			},
			// 地址列表
			areaCascaderList: [],
			// 修改保存下来的地址id
			areaCascaderSelectId: [],
			area: '',
			options: [],
			streetOption:[],
			street:'',
			page:1,
            paginate:5,
            limit:0,
            total:0,
		}
	},
	async activated() {
		await this.getBaseInfo()
	},
	computed: {
		...mapState({
			routesItem: state => state.routes
		})
	},
	mounted() {
		this.options = cityData
		// this.getarea()
		this.getList(1)
		
	},
	methods: {
		streetChange(e){
			this.subForm.street_id = e[0]
		},
		handleChange(e) {
			let joinedString = '';
			e.forEach(element => {
				joinedString += element + '/';
			});
			let lastIndex = joinedString.lastIndexOf('/');
			let result = joinedString.substring(0, lastIndex);
			this.subForm.area = result;
			this.getstreet(result);
			console.log(this.area, '选择');
		},
		async getarea(id) {
			this.$api.channel.areaInfo({
				id
			}).then((res) => {
				this.options = res.data
				console.log(this.options, '获取省市区');
			})
		},
		async getstreet(area) {
			this.$api.channel.streetLst({
				'area':area
			}).then((res) => {
				this.streetOption = res.data
				console.log(this.options, '获取街道');
			})
		},
		async getList(page) {
			let {
				code,
				data
			} = await this.$api.agent.quartersList({
				page: this.page,
				paginate: this.paginate
			})
			if (code !== 200) return
			this.total = data.total
			this.residentlist = data
		},
		handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.paginate = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.page = val
            this.getList()
        },
		async getBaseInfo() {
			let {
				code,
				data
			} = await this.$api.agent.adminSelect()
			if (code !== 200) return
			this.base_agent = data
		},

		async toShowDialog(item) {
			if (item) {
                this.subForm = item
                this.area = item.area.split('/');
				console.log(this.area);
				this.getstreet(this.subForm.area)
            } else {
                this.subForm.id = ''
            }
			this.showDialog = true
		},
		async submitFormInfo() {
			let subForm = JSON.parse(JSON.stringify(this.subForm))
			console.log(subForm);
			let methodModel = subForm.id ? 'xiaoquUpdate' : 'xiaoquAdd'
			let {
				code
			} = await this.$api.channel[methodModel](subForm)
			if (code !== 200) return
			this.$message.success(this.$t('tips.successSub'))
			this.showDialog = false
			this.getList(1)
		},
		confirmDel(id, status) {
			this.$api.channel.xiaoquDel({
				id
			}).then(() => {
				this.$message.success('删除成功')
				this.getList(1)
			})
			return false
			this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
				confirmButtonText: this.$t('action.comfirm'),
				cancelButtonText: this.$t('action.cancel'),
				type: 'warning'
			}).then(() => {
				this.updateItem(id, status)
				this.updateIndex(id, index_switch)
				this.getList(1)
			}).catch(() => {

			})
		},


	},
	filters: {
		handleTime(val, type) {
			let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format(
				'HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
			return time
		}
	}
}
</script>

<style lang="scss" scoped>
.lb-shop-order {
	.page-main {
		width: 100%;

		.el-select,
		.el-input-number,
		.el-input {
			width: 200px;
		}

		.bell-tag {
			top: 10px;
			left: 0;
			width: 50px;
			height: 20px;
			background: #f12c20;
			border-radius: 5px 0 10px 0;

			.text {
				scale: 0.8;
			}
		}

		.dialog-form {

			.el-select,
			.el-input-number,
			.el-input {
				width: 300px;
			}
		}
	}
}

.none {
	display: none;
}
.el-pagination{
    display: flex;
    justify-content: flex-end;
}
</style>
<style media="print">
.none {
	display: block;
}
</style>